<example name="Input">
  <file type="html">
    <div id="input"></div>
  </file>

  <file type="js">
    import React from 'react';
    import {render} from 'react-dom';
    import Input from '@jetbrains/ring-ui/components/input/input';

    render(
      <Input/>,
      document.getElementById('input')
    );
  </file>
</example>
<example name="Input sizes">
  <file type="html">
    <div style="width: 600px">
      <div class="input-control-wrapper">
        <input type="number" class="ring-input">
        <div class="ring-error-bubble active">No modifiers (full-width)</div>
      </div>
      <div class="input-control-wrapper">
        <input type="number" class="ring-input ring-input-size_xs">
        <div class="ring-error-bubble active">Extra-short</div>
      </div>
      <div class="input-control-wrapper">
        <input type="number" class="ring-input ring-input-size_s">
        <div class="ring-error-bubble active">Short</div>
      </div>
      <div class="input-control-wrapper">
        <input type="number" class="ring-input ring-input-size_md">
        <div class="ring-error-bubble active">Medium</div>
      </div>
      <div class="input-control-wrapper">
        <input type="number" class="ring-input ring-input-size_l">
        <div class="ring-error-bubble active">Long</div>
      </div>
    </div>
  </file>
  <file type="css">
    :global(.input-control-wrapper) {
      position: relative;
      margin: 16px;
    }
  </file>
  <file type="js">
    import '@jetbrains/ring-ui/components/input/input.scss';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';
  </file>
</example>

<example name="Textarea sizes">
  <file type="html">
    <div style="width: 600px">
      <div class="input-control-wrapper">
        <textarea class="ring-input"></textarea>
        <div class="ring-error-bubble active">No modifiers (full-width)</div>
      </div>
      <div class="input-control-wrapper">
        <textarea class="ring-input ring-input-size_xs"></textarea>
        <div class="ring-error-bubble active">Extra-short</div>
      </div>
      <div class="input-control-wrapper">
        <textarea class="ring-input ring-input-size_s"></textarea>
        <div class="ring-error-bubble active">Short</div>
      </div>
      <div class="input-control-wrapper">
        <textarea class="ring-input ring-input-size_md"></textarea>
        <div class="ring-error-bubble active">Medium</div>
      </div>
      <div class="input-control-wrapper">
        <textarea class="ring-input ring-input-size_l"></textarea>
        <div class="ring-error-bubble active">Long</div>
      </div>
    </div>
  </file>
  <file type="css">
    :global(.input-control-wrapper) {
      position: relative;
      margin: 16px;
    }
  </file>
  <file type="js">
    import '@jetbrains/ring-ui/components/input/input.scss';
    import '@jetbrains/ring-ui/components/input-size/input-size.scss';
  </file>
</example>
